<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>发布内容</title>
    <link rel="stylesheet" href="../css/theme.css">
    <style>
        body {
            background-color: #F4F5F7;
            color: initial;
            overflow: auto;
        }

        .editing_width {
            width: 1200px;
            margin: auto auto 20px auto;
            padding: 20px;
            border-radius: 5px;
            background-color: white;
        }

        .editor {
            width: 100%;
        }

        .editing_top {
            display: flex;
            align-items: center;
            margin-top: 80px;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .editing_top button {
            background-color: black;
            border-radius: 5px;
            font-weight: bold;
            color: white;
            padding: 10px 25px;
            margin: 0 5px;
        }

        .editing_title {
            border: none;
            font-size: 25px;
            width: 300px;
            border-bottom: 2px solid black;
            outline: none;
        }

        .editing_description {
            width: 80%;
            height: 100px;
            padding: 10px;
            font-size: 20px;
            resize: vertical;
            margin-bottom: 20px;
        }

        @media (max-width:768px) {
            .editing_title {
                width: 180px;
            }

            .editing_width {
                margin-top: 0px;
            }

            .editing_top a {
                padding: 5px 15px;
                font-weight: normal;
                margin: auto;
                font-size: 14px;
            }

            .editing_top {
                margin-top: 0px;
            }
        }

        @media (max-width:1200px) {
            .editing_width {
                width: 100%;
            }
        }
    </style>
</head>
<!-- $2a$10$BkNsAplcM.QWvJWicx21zeeHanAVrJzK6kgBdqX.s4Y0tPfRjdkM. -->
<body>
    <div class="editing_width">
        <div class="editing_top">
            <input type="text" placeholder="请输入标题" name="" id="editing_title" class="editing_title">
            <div>
                <button id="btn_publish">发布</button>
                <button>暂存</button>
            </div>
        </div>
        <div style="display: flex;justify-content: space-between;">
            <textarea placeholder="描述内容" id="editing_description" class="editing_description"></textarea>
            <!-- <img src="../img/blog_cover.png" alt=""> -->
            <input type="file" name="" id="blog_cover">
        </div>


        <div class="editor" id="editor" style="z-index: 90;position: relative;"></div>
    </div>
    <script src="../js/wangEditor.min.js"></script>
    <script>
        const E = window.wangEditor
        const editor = new E('#editor')
        // 或者 const editor = new E( document.getElementById('div1') )
        editor.config.height = 400
        editor.config.uploadFileName = 'blogImage'
        editor.config.uploadImgServer = '/user/up_blog_image'
        editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
        editor.create()

        let blogCoverEle = document.getElementById('blog_cover')
        let blogTitleEle = document.getElementById('editing_title')
        let blogDescriptionEle = document.getElementById('editing_description')


        blogCoverEle.addEventListener('change', function () {
            let tempFile = blogCoverEle.files[0]
            console.log(tempFile)
        })

        document.getElementById('btn_publish').addEventListener('click', function () {
            let blogHtml = editor.txt.html()
            let blogTitle = blogTitleEle.value
            let blogDescription = blogDescriptionEle.value

            let formdata = new FormData()
            formdata.append('blogCover',blogCoverEle.files[0])
            formdata.append('blogContent',JSON.stringify({
                title:blogTitle,
                content:blogHtml,
                description:blogDescription
            }))
            console.log(formdata)

            fetch('/user/publish_blog', {
                method: 'post', 
                body:formdata,
                headers: {
                    //'Content-Type': 'multipart/form-data'
                }
            }).then(resp=>{
                resp.json().then(resultData=>{
                    console.log(resultData)
                    if(resultData.result=='OK'){
                        window.location.href='/userzone/user.html'
                    }
                })
            }).catch(err=>console.log(err))

        })
    </script>
</body>

</html>